<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <base th:href="@{/}">
    <meta charset="UTF-8">
    <title>查看我的挂号信息</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <link rel="stylesheet" type="text/css" href="css/style1.css" />
    <script src="js/jquery.min.js"></script>
    <script type="text/javascript" th:inline="javascript">
        function cancleMzgh(id,dId){
            $.ajax(
                {
                    //请求路径，要注意的是url和th:inline="javascript"
                    url : [[@{/user/cancleMzgh}]],
            //请求类型
            type : "post",
                //data表示发送的数据
                data : {
                id : id,
                dId:dId
            },
            //成功响应的结果
            success : function(obj){//obj响应数据
                    alert(obj)
                    //并刷新网页
                    location.reload();
            },
            error : function() {
                alert("处理异常！");
            }
        }
        );
        }
    </script>
    <style>
        .btn2{
            color: #eec4a0;
            background: #fdf6ec;
            border: 1px solid #f8e6cb;
        }
        .btn2:hover,.btn2:focus{
            color: #fff !important;
            background-color: #eec4a0 !important;
            border-color: #eec4a0 !important;
        }
        .cancle{
            color: #eec4a0;
        }
        .cancle:hover,.cancle:focus{
            color: #fff !important;
        }
    </style>
</head>
<body>
<!-- 加载header.html -->
<div th:insert="~{user/header}"></div>
<main id="main">

    <!--副标题-->
    <section class="breadcrumbs">
        <div class="container">
            <div class="d-flex justify-content-between align-items-center">
                <h2 id="pageTitle">我的挂号</h2>
                <ol>
                    <li><a href="index.html">首页</a></li>
                    <li id="breadcrumbItem"><a href="#" ></a>我的挂号</li>
                </ol>
            </div>
        </div>
    </section>
    <section class="inner-page">
        <div class="container">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">我的挂号列表</h3>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table text-center">
                            <tbody class="text-center">
                            <tr>
                                <th>挂号编号</th>
                                <th>挂号医生名字</th>
                                <th>挂号时间</th>
                                <th>具体时间</th>
                                <th>状态</th>
                                <th>操作</th>
                            </tr>
                            <tr th:each="m:${mzghList}">
                                <td th:text="${m.id}"></td>
                                <td th:text="${m.dname}"></td>
                                <td th:text="${weekdayMap[m.weekday]}"></td>
                                <td th:text="${m.yyrq}"></td>
                                <td th:text="${#strings.equals(m.status, '0') ? '待叫号' : (#strings.equals(m.status, '1') ? '已叫号' : '')}"></td>
                                <td>
                                    <button type="submit" class="btn btn2 btn-sm"
                                            th:style="${m.status == '1'} ? 'display:none;color: #eec4a0;background: #fdf6ec;border: 1px solid #f8e6cb;' : 'color: #eec4a0;background: #fdf6ec;border: 1px solid #f8e6cb;'">
                                        <a th:href="'javascript:cancleMzgh(' + ${m.id} + ', ' +${m.doctor_id} + ')'">
                                            <span class="cancle">取消挂号</span>
                                        </a>
                                    </button>
                                </td>

                            </tr>
                            <tr>
                                <td colspan="6" style="border: none;">
                                    <ul class="pagination justify-content-center">
                                        <li class="page-item" th:if="${currentPage} != 1">
                                            <a class="page-link"
                                               th:href="@{/user/selectMyMzghByPage(currentPage=${currentPage - 1})}">上一页</a>
                                        </li>
                                        <li class="page-item disabled">
                                            <a class="page-link" href="#">第<span
                                                    th:text="${currentPage}"></span>页</a>
                                        </li>
                                        <li class="page-item disabled">
                                            <a class="page-link" href="#">共<span
                                                    th:text="${totalPage}"></span>页</a>
                                        </li>
                                        <li class="page-item" th:if="${currentPage} !=${totalPage}">
                                            <a class="page-link"
                                               th:href="@{/user/selectMyMzghByPage(currentPage=${currentPage + 1})}">下一页</a>
                                        </li>
                                    </ul>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </section>
</main>
<script src="js/main.js"></script>
</body>
</html>